<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
  <script src="../../js/dayjs.min.js"></script>
</head>
<body>
  <div id="root">
    <h2>显示格式化的时间</h2>
    <!--计算属性实现-->
    <h2>现在是{{fmtTime}}</h2>
    <!--方法实现-->
    <h2>现在是{{getFmtTime()}}</h2>
    <!--过滤器实现-->
    <!--过滤器传参,形参第一个参数永远是管道符左边的变量,用户可选择是否额外传参-->
    <h2>现在是{{nowTime | timeFormatter}}</h2>
    <!--过滤器传参-->
    <h2>现在是{{nowTime | timeFormatter('YYYY年MM月DD日 HH点mm分ss秒')}}</h2>
    <!--多个过滤器串联-->
    <h2>现在是{{nowTime | timeFormatter('YYYY年MM月DD日 HH点mm分ss秒') | doSomething}}</h2>
    <!--全局过滤器,所有的vm实例都可以使用-->
    <h2>现在是{{nowTime | timeFormatter('YYYY年MM月DD日 HH点mm分ss秒') | aFilter}}</h2>
  </div>

  <script type="text/javascript">
    Vue.filter('aFilter',function (value){
      console.log('进入全局过滤器',value)
      return value.slice(0,4)
    });
    var vm = new Vue({
      el:'#root',
      data:{
        nowTime:1730384445242
      },
      computed:{
        fmtTime(){
          return dayjs(this.nowTime).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      methods:{
        getFmtTime(){
          return dayjs(this.nowTime).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      filters:{
        timeFormatter(value,formatStr='YYYY-MM-DD HH:mm:ss'){
          //formatStr形参给了默认值
          return dayjs(value).format(formatStr)
        },
        doSomething(value){
          return value.slice(0,7);
        }
      }
    });
  </script>
</body>
</html>
